<template>
  <div>
    <div class="m-b-20 ovf-hd">
      <div class="fl" v-if="addShow">
        <router-link class="btn-link-large add-btn" to="edit">
          <i class="el-icon-plus"></i>&nbsp;&nbsp;添加用户
        </router-link>
      </div>
      <div class="fr w-200" :class="{'m-l-30':addShow}">
        <el-input placeholder="请输入用户名" v-model="keywords">
          <el-button slot="append" icon="el-icon-search" @click="search()"></el-button>
        </el-input>
      </div>
    </div>
    <el-table
        :data="tableData"
        style="width: 100%"
        @selection-change="selectItem">
      <el-table-column
          type="selection"
          width="50">
      </el-table-column>
      <el-table-column
          label="用户名"
          prop="member_name"
          width="200">
      </el-table-column>
      <el-table-column
          label="备注"
          prop="remark"
          width="200">
      </el-table-column>
      <el-table-column
          label="状态"
          width="100">
        <template slot-scope="scope">
          <div>
            {{ scope.row.status | status }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
          label="操作"
          width="200">
        <template slot-scope="scope">
          <div>
            <span v-if="editShow">
              <router-link :to="{ name: 'memberEdit', params: { id: scope.row.member_id }, query: { id: scope.row.member_id
              }}">
                <el-button
                    size="small"
                    type="primary">
                编辑
                </el-button>
              </router-link>
            </span>
            <span v-if="deleteShow">
              <el-button size="small" type="danger" @click="confirmDelete(scope.row)">删除</el-button>
            </span>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="pos-rel p-t-20">
      <btnGroup :selectedData="multipleSelection" :type="'user'"></btnGroup>
      <div class="block pages">
        <el-pagination
            @current-change="handleCurrentChange"
            layout="prev, pager, next"
            :page-size="limit"
            :current-page="page"
            :total="dataCount">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import btnGroup from '../../Common/btn-group.vue'
  import http from '../../../assets/js/http'
  import _g from '@/assets/js/global'
  import { Button, Input, Table, TableColumn, Pagination, Loading } from 'element-ui'
  Vue.use(Button)
  Vue.use(Input)
  Vue.use(Table)
  Vue.use(TableColumn)
  Vue.use(Pagination)
  Vue.use(Loading)

  export default {
    data() {
      return {
        tableData: [],
        dataCount: null,
        page: 1,
        keywords: '',
        multipleSelection: [],
        limit: 15,
        group_id: 0,
        structure_id: 0,
        post_id: 0
      }
    },
    methods: {
      search() {
        this.getAllUser()
      },
      selectItem(val) {
        this.multipleSelection = val
      },
      handleCurrentChange(page) {
        this.page = page
        this.getAllUser()
      },
      confirmDelete(item) {
        this.$confirm('确认删除该用户?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          _g.openGlobalLoading()
          this.apiDelete('admin/member/', item.member_id).then((res) => {
            _g.closeGlobalLoading()
            this.handelResponse(res, (data) => {
              _g.toastMsg('success', '删除成功')
              setTimeout(() => {
                _g.shallowRefresh(this.$route.name)
              }, 1500)
            })
          })
        }).catch(() => {
          // catch error
        })
      },
      getAllUser() {
        let loadingInstance = Loading.service({
          lock: true,
          text: '正在加载中',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        this.loading = true
        const data = {
          params: {
            keywords: this.keywords,
            page: this.page,
            limit: this.limit,
            group_id: this.group_id,
            post_id: this.post_id,
            structure_id: this.structure_id
          }
        }
        this.apiGet('admin/member', data).then((res) => {
          if (res.get_param) {
            if (res.get_param.page) {
              this.page = parseInt(res.get_param.page)
            }
            if (res.get_param.limit) {
              this.limit = parseInt(res.get_param.limit)
            }
          }
          this.handelResponse(res, (data) => {
            this.tableData = data.list
            this.dataCount = data.count
            loadingInstance.close()
          })
        })
      },
      init() {
        if (this.$route.query.group_id) {
          this.group_id = this.$route.query.group_id
          this.structure_id = this.$route.query.structure_id
        }
        if (this.$route.query.post_id) {
          this.post_id = this.$route.query.post_id
        }
        if (this.$route.query.structure_id) {
          this.structure_id = this.$route.query.structure_id
        }
        this.getAllUser()
      }
    },
    created() {
      this.init()
    },
    computed: {
      addShow() {
        return _g.getHasRule('user-save')
      },
      editShow() {
        return _g.getHasRule('user-update')
      },
      deleteShow() {
        return _g.getHasRule('user-delete')
      }
    },
    watch: {
      '$route' (to, from) {
        this.init()
      }
    },
    components: {
      btnGroup
    },
    mixins: [http]
  }
</script>
